<template>
  <div class="userInfo">
    <span>
      <img :src="userInfo.userImg" />
      {{userInfo.userName}}
    </span>
    <span style="color: rgba(277, 60, 100, 100)">{{userInfo.userYc}}</span>
    <span style="color: rgba(255, 141, 26, 100)">{{userInfo.userNum}}</span>
    <span style="color: rgba(51, 148, 255, 100)">{{userInfo.userYy}}</span>
    <span style="color: rgba(121, 72, 234, 100)">{{userInfo.userTime}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    userInfo: Object,
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {},

  //组件
  components: {},

  //生命周期 - 实例完成
  created() {},

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.userInfo {
    position: absolute;
    bottom: 0;
  span {
    margin-right: 20px;
    img {
      vertical-align: bottom;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right:6px;
    }
  }
}
</style>
